<template lang="html">
  <div id="register">
    <hr></hr>
    <p class="title">注 册</p>
    <input class='email' type="text" v-model='email' placeholder="请输入您的邮箱"/>
    <button @click='change_random_number_data' class='get_random_number'>{{ random_number }}</button>
    <input type="text" placeholder="请输入验证码"/>
    <input type="text" placeholder="用户名(至少6位字符)"/>
    <input type="password" placeholder="请输入密码(至少6位字符)"/>
    <input type="password" placeholder="确认密码"/>
    <button class="register_number">注册</button>
    <router-link class='to_login' to="login">已有账号？</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      random_number: "获取验证码"
    }
  },
  methods: {
    change_random_number_data() {
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;//邮箱验证正则表达式
      if(reg.test(this.email)) {
        //邮箱输入正确的时候，发送请求，向邮箱发送验证码
        console.log('邮箱正确 ~');
      }else {
        console.log('邮箱输入不正确~');
      }
    }
  }
}
</script>

<style lang="scss">
  @import './register.scss'
</style>
